<template>
	<view class="container">
		<st-navigation backgroundColor="#fff"></st-navigation>
		
		<view class="topWrap">
			<view class="mask-box">
				<wanl-image-cutter @ok="getCropperImage" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500"
					:maxHeight="500" />
			</view>
			<view class="text-center padding-top-xl" :style="{ backgroundImage: 'url(' + usermaks + ')' }">
				<view @tap="chooseImage" class="cu-avatar avatar" v-if="path" :style="{ backgroundImage: 'url(' + path + ')' }">
				</view>
				<view @tap="chooseImage" class="cu-avatar avatar" v-else
					:style="{ backgroundImage: 'url(' + $wanlshop.ossYSM(user.avatar, 100, 100) + ')' }"></view>
				<view class="name" @tap="chooseImage">
					更换真人头像
				</view>
			</view>
			<!-- <view class="img">
				<image src="../../../static/images/ysmHome/avatar-1.png" mode="widthFix"></image>
			</view>
			<view class="name">
				更换真人头像
			</view> -->
		</view>
		<view class="empty"></view>
		<view class="formWrap">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="性别">
					<uni-data-checkbox v-model="valiFormData.gender" :localdata="genders" />
				</uni-forms-item>
				<uni-forms-item label="生日">
					<uni-datetime-picker type="date" :border="false" v-model="valiFormData.birthday" @maskClick="maskClick"
						:clear-icon="false" />
				</uni-forms-item>
				<!-- <uni-forms-item label="所在地">
					<uni-data-picker v-model="valiFormData.city" :localdata="cityData" popup-title="所在地" :border="false">
					</uni-data-picker>
				</uni-forms-item> -->
			</uni-forms>
		</view>
		<view class="actions">
			<button type="primary" @tap="submit('valiForm')" class="btn">保存</button>
			<button type="default" @tap="logout()" class="btn logout">退出登录</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			url: '',
			path: '',
			usermaks: '',


			valiFormData: {
				name: '',
				gender: '',
				birthday: '',
				avatar: '',
				// city: ''
			},
			genders: [
				{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				},
			],
			rules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '姓名不能为空'
					}]
				},
				city: {
					required: true,
					errorMessage: '所在地不能为空'
				}
			},

			// 城市数据
			cityData: [{
				text: "北京",
				value: "10001",
			}, {
				text: "上海",
				value: "10002",
			}, {
				text: "深圳",
				value: "10004",
			}],
		}
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		if (this.user) {
			this.valiFormData.name = this.user.username || this.user.nickname;
			this.valiFormData.gender = this.user.gender;
			this.valiFormData.birthday = this.user.birthday;
			this.valiFormData.avatar = this.user.avatar;
			// this.valiFormData.city = this.user.city;
		}
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					// 设置url的值，显示控件
					this.url = res.tempFilePaths[0];
				}
			});
			// this.usermaks = this.$wanlshop.maks();
		},
		getCropperImage(e) {
			this.path = e.path;
			this.url = '';
			// 上传图片
			console.log(e);
			this.$api.upload({
				url: '/common/upload',
				filePath: e.path,
				name: 'file',
				success: res => {
					this.valiFormData.avatar = res.url;
				}
			});

			// this.$api.get({
			// 	url: '/wanlshop/common/uploadData',
			// 	success: updata => {
			// 		this.$api.upload({
			// 			url: updata.uploadurl,
			// 			filePath: e.path,
			// 			name: 'file',
			// 			formData: updata.storage == 'local' ? null : updata.multipart,
			// 			success: res => {
			// 				this.$api.post({
			// 					url: '/wanlshop/user/profile',
			// 					data: { avatar: res.fullurl },
			// 					success: data => {
			// 						this.valiFormData.avatar = data.avatar;
			// 						this.$store.commit('user/setUserInfo', { avatar: data.avatar });
			// 					}
			// 				});
			// 			}
			// 		});
			// 	}
			// });
		},
		oncancle() {
			this.url = '';
		},

		maskClick(e) {
			console.log('maskClick事件:', e);
		},
		submit() {
			let params = JSON.parse(JSON.stringify(this.valiFormData));
			params.username = params.name;
			params.nickname = params.name;

			delete (params.name);
			this.$api.post({
				url: '/wanlshop/user/profile',
				data: params,
				success: res => {
					this.$store.commit('user/setUserInfo', res);
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
			});
		},
		logout() {
			this.$api.get({
				url: '/wanlshop/user/logout',
				data: {
					client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync("wanlshop:chat_client_id") : null
				},
				success: res => {
					this.$store.dispatch('user/logout');
					this.$wanlshop.msg('退出成功');
					this.$wanlshop.back(1);
				}
			});
		},
	}
}
</script>

<style lang="less" scoped>
body,
uni-page-body {
	height: 100%;
}
.container11{

}
.container {
	height: 100%;
	background-color: #fff;
	
	.mask-box{
		width: 100vw;
	}
	
	

	.topWrap {
		display: flex;
		flex-direction: column;
		align-items: center;

		.avatar {
			width: 200rpx;
			height: 200rpx;
			background-color: #e5e5e5;
			border-radius: 50%;
			margin: 30rpx;
		}

		.img {
			margin-top: 100rpx;
			margin-bottom: 32rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.name {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #B3B3B3;
			padding-bottom: 40rpx;
		}
	}

	.empty {
		height: 16rpx;
		background-color: #F6F5FA;
	}

	.formWrap {
		padding: 48rpx;

		.uni-forms-item {
			border-bottom: 1rpx solid #E6E6E6;
			padding: 14rpx 0;
			align-items: center;

			/deep/.uni-forms-item__content {
				font-size: 32rpx;
			}

			/deep/.uni-easyinput__content-input {
				padding-left: 0 !important;
			}

			/deep/.uni-easyinput__content-input {
				font-size: 32rpx;
			}

			/deep/.uni-date__x-input {
				font-size: 32rpx;
			}

			/deep/.uni-forms-item__label {
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #B3B3B3;
			}

			/deep/.checklist-text {
				font-size: 32rpx;
			}

			/deep/.placeholder {
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
			}

			/deep/.selected-list {
				font-size: 32rpx;
			}

			.uni-input-input {
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
			}

			/deep/.uni-date-x {
				padding-left: 0;
			}
		}
	}

	.btn {
		margin: 0 20rpx;
		background: #FE8101;
		line-height: 86rpx;
		margin-bottom: 30rpx;

		&.logout {
			background: none;
			border: 1px solid #FE8101;
			color: #FE8101;
		}
	}
}
</style>
